<template>
    <div>
        <el-card>
            <mytitle :showLine="false">{{$route.meta.title}}</mytitle>
            <div>
                <el-form :model="info" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
                <el-form-item label="操作名称" prop="farmOperatorName" style="width: 320px;" >
                    <el-input type="text" v-model="info.farmOperatorName"  placeholder="请输入操作名称" />
                </el-form-item>
                 <div></div>
                <el-form-item label="是否上传图片" prop="whetherUpload" style="width: 320px;">
                    <el-radio-group v-model="info.whetherUpload">
                            <el-radio :label='0'>不上传</el-radio>
                            <el-radio :label='1'>上传</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否需要投入品" prop="whetherVariableInput" style="width: 320px;">
                    <el-radio-group v-model="info.whetherVariableInput">
                        <el-radio :label='0'>不需要</el-radio>
                        <el-radio :label='1'>需要</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="启用状态" prop="state" style="width: 320px;">
                    <el-switch
                        v-model="info.state"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitForm('ruleForm')" type="success" >保存</el-button>
                    <el-button @click="$router.go(-1)" type="success"  plain>返回</el-button>
                </el-form-item>
            </el-form>
            </div>
        </el-card>
    </div>
</template>
<script>
import {findFarmOperatorById,addFarmOperator} from '../util/api.js'
 export default{
    data(){
        return{
            operatorId:"",
            info: {
                farmOperatorName: '',
                whetherUpload: "",
                whetherVariableInput: "",
                state: 0,
            },
            rules: {
                farmOperatorName: [
                    { required: true, message: '请输入操作名称', trigger: 'blur' },
                ],
                whetherUpload: [
                    { required: true, message: '请选择是否需要上传图片', trigger: 'change' },
                ],
                whetherVariableInput: [
                    { required: true, message: '请选择是否需要投入品', trigger: 'change' }
                ],
                state: [
                    { required: true, message: '请选择启用状态', trigger: 'change' }
                ],
            }
        }
    },
    mounted(){
        if(this.$route.query.id){
             this.operatorId = this.$route.query.id
             this.getDetail()
        }
    },
    methods:{
        async getDetail(){
          let res = await findFarmOperatorById({operatorId:this.operatorId})
        //   console.log(res)
          if(res.code!=200)return
          this.info = res.data
          this.info.farmOperatorName = res.data.name
          this.info.farmOperatorId = res.data.id
        },
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let res = await addFarmOperator(this.info)
                    // console.log(res)
                    if(res.code==90028)return this.$message.info(res.msg)
                    if(res.code!=200)return
                    this.$message.success('更改成功！')
                    this.$router.go(-1)
                } else {
                    // console.log('error submit!!');
                    return false;
                }
            });
        },
    }
 }
</script>